<template>
  <div class="activityPage">
    <div class="searchBox bgfff">
      <el-form
        :inline="true"
        :model="form"
        ref="formRef"
        class="demo-form-inline"
        size="small"
      >
        <el-row>
          <el-col :span="7">
            <el-form-item label="微项目名称：" prop="name">
              <el-input v-model="form.name" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="已发放人员姓名：" prop="userName">
              <el-input v-model="form.userName" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7" style="display: flex; justify-content: flex-end">
            <el-form-item style="margin-right: 0">
              <el-button type="primary" size="small" @click="onSubmit"
                >查询</el-button
              >
              <el-button @click="resetForm('formRef')">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="tablesCard bgfff">
      <div class="tablesCardTop">
        <div class="totalTxt"></div>
        <el-button type="primary" size="small" @click="addShow = true"
          >新建</el-button
        >
      </div>
      <el-table :data="tableData" border size="small" style="width: 100%">
        <!-- height="580" -->
        <el-table-column prop="project_name" label="微项目名称" align="center">
        </el-table-column>
        <el-table-column prop="point_num" label="积分数量" align="center">
        </el-table-column>
        <el-table-column
          prop="report_num"
          label="已申请（人）"
          align="center"
        />
        <el-table-column
          prop="distribution_personnel"
          label="已发放人员"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间" align="center" />

        <el-table-column
          fixed="right"
          prop=""
          label="操作"
          align="center"
          width="150"
        >
          <template slot-scope="scope">
            <div class="">
              <el-link
                :disabled="scope.row.status != 2"
                type="primary"
                @click="onBtns(1, scope.row)"
                >查看</el-link
              >
              <el-divider direction="vertical"></el-divider>
              <el-link
                :disabled="scope.row.status != 1"
                type="primary"
                @click="onBtns(2, scope.row)"
                >审核</el-link
              >
              <el-divider direction="vertical"></el-divider>

              <el-popover
                :disabled="scope.row.status != 1"
                :ref="`popover-${scope.row.id}`"
                popper-class="myPopover"
                placement="left"
                width="160"
                trigger="click"
              >
                <p class="text">
                  <i class="el-icon el-icon-warning"></i>
                  是否确认删除？
                </p>
                <div class="btnBox">
                  <el-button
                    size="mini"
                    @click="$refs[`popover-${scope.row.id}`].doClose()"
                    >取消</el-button
                  >
                  <el-button
                    type="primary"
                    size="mini"
                    @click="onBtns(3, scope.row)"
                    >确定</el-button
                  >
                </div>
                <el-link
                  :disabled="scope.row.status != 1"
                  type="danger"
                  slot="reference"
                  >删除</el-link
                ></el-popover
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pageBlock">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :current-page.sync="form.page"
          :page-size="form.limit"
          @size-change="
            (e) => {
              form.limit = e;
              getList();
            }
          "
          @current-change="
            (e) => {
              form.page = e;
              getList();
            }
          "
        >
        </el-pagination>
      </div>
    </div>
    <addMinProject
      v-if="addShow"
      @handleClose="
        (val) => {
          addShow = false;
          if (val) {
            getList();
          }
        }
      "
      :dialogVisible="addShow"
    >
    </addMinProject>
    <MinProjectdetails
      v-if="detailsShow"
      @handleClose="
        (val) => {
          detailsShow = false;
          if (val) {
            getList();
          }
        }
      "
      :dialogVisible="detailsShow"
      :projectId="projectId"
    ></MinProjectdetails>
  </div>
</template>

<script>
import { minProjectList, delMinProject } from "@/api/miniApply.js";
import addMinProject from "./common/addMinProject.vue";
import MinProjectdetails from "./common/details.vue";
export default {
  name: "",
  props: [""],

  data() {
    return {
      typeList: {},
      form: {
        name: "",
        userName: "",
        page: 1,
        limit: 10,
      },
      tableData: [],
      total: 0,
      projectId: "",
      shopInfo: {},
      detailsShow: false,
      addShow: false,
    };
  },

  components: {
    addMinProject,
    MinProjectdetails,
  },

  computed: {},

  beforeMount() {},

  mounted() {
    this.getList();
  },

  methods: {
    hodd(val) {
      alert(val);
    },
    onSubmit() {
      this.getList();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.getList();
    },
    getList() {
      minProjectList(this.form).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.data;
          this.total = res.data.count;
        }
      });
    },
    onBtns(val, info) {
      this.projectId = info.id;
      if (val == 1) {
        //查看
        this.detailsShow = true;
      } else if (val == 2) {
        //审核
        this.detailsShow = true;
      } else {
        //删除
        this.$refs[`popover-${info.id}`].doClose();

        delMinProject({
          id: this.projectId,
        }).then((res) => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: res.msg,
            });
            this.getList();
          }
        });
      }
    },
  },

  watch: {},
};
</script>
<style lang='scss' scoped>
.activityPage {
  .searchBox {
    margin-bottom: 14px;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 120px;
    /deep/.el-form-item {
      margin-bottom: 0;
      .el-input__inner {
        width: 300px;
      }
    }
  }
  .tablesCard {
  }
}
</style>